<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Blank">
    
    <title>
        
            CSS资源大全中文版 |
        
        Blankの博客
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.jpg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/font/css/fontawesome.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/font/css/regular.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/font/css/solid.min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/font/css/brands.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN","path":"search.json"}
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066cc","logo":"/images/logo.jpg","favicon":"/images/logo.jpg","avatar":"/images/logo.jpg","font_size":"18px","font_family":"STKaiti","hover":{"shadow":true,"scale":true},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":true,"percent":true}},"local_search":{"enable":true,"preload":true},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"mac"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":true},"lazyload":{"enable":true},"comment":{"enable":false,"use":"gitalk","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":"5ober","github_admins":"5ober","repository":"hexo-blog-comments","client_id":"40d85a7b36388c0b5094","client_secret":"6c7eab92d24b6f1bdfbcdf077c73e86841b35d5e","proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":false,"custom_label_list":["Trainee","Engineer","Java工程师"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":true},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"}
    KEEP.language_code_block = {"copy":"复制代码","copied":"已复制","fold":"折叠代码块","folded":"已折叠"}
    KEEP.language_copy_copyright = {"copy":"复制版权信息","copied":"已复制","title":"原文标题","author":"原文作者","link":"原文链接"}
  </script>
<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Blankの博客" type="application/atom+xml">
</head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
        <span class="pjax-progress-bar"></span>
        <i class="pjax-progress-icon fas fa-circle-notch fa-spin"></i>
    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.jpg">
                </a>
            
            <a class="logo-title" href="/">
               Blankの博客
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                友链
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">友链</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">CSS资源大全中文版</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/logo.jpg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">Blank</span>
                            
                                <span class="author-label">Java工程师</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-02-21 00:51:18</span>
        <span class="mobile">2023-02-21 00:51</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-02-21 00:47:20</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/CSS%E8%B5%84%E6%BA%90%E5%A4%A7%E5%85%A8/">CSS资源大全</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/CSS/">CSS</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>3.3k 字</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>13 分钟</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <h1 id="CSS-资源大全中文版"><a href="#CSS-资源大全中文版" class="headerlink" title="CSS 资源大全中文版"></a>CSS 资源大全中文版</h1><p>我想很多程序员应该记得 GitHub 上有一个 Awesome：XXX 系列的资源整理。[awesome-css] 是 sotayamashita 发起维护的 CSS 资源列表，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。</p>
<p>Awesome 系列虽然挺全，但基本只对收录的资源做了极为简要的介绍，如果有更详细的中文介绍，对相应开发者的帮助会更大。这也是我们发起这个开源项目的初衷。</p>
<hr>
<h3 id="我们要做什么？"><a href="#我们要做什么？" class="headerlink" title="我们要做什么？"></a>我们要做什么？</h3><ul>
<li>基于 awesome-css 列表，我们将对其中的各个资源项进行编译整理。此外还将从其他来源补充好资源。</li>
<li>整理后的内容，将收录在<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/" >伯乐在线资源频道<i class="fas fa-external-link-alt"></i></a>。可参考已整理的内容： ：《<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/bem/" >BEM：前端命名方法论<i class="fas fa-external-link-alt"></i></a>》 ：《<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/sass-css/" >Sass：CSS预处理器<i class="fas fa-external-link-alt"></i></a>》 ：《<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/yui-compressor/" >YUI Compressor：JS&#x2F;CSS压缩工具<i class="fas fa-external-link-alt"></i></a>》</li>
</ul>
<hr>
<h3 id="如何参与本项目？"><a href="#如何参与本项目？" class="headerlink" title="如何参与本项目？"></a>如何参与本项目？</h3><hr>
<h3 id="如何为列表贡献新资源？"><a href="#如何为列表贡献新资源？" class="headerlink" title="如何为列表贡献新资源？"></a>如何为列表贡献新资源？</h3><p>欢迎大家为列表贡献高质量的新资源，提交PR时请参照以下要求：</p>
<ul>
<li>请确保推荐的资源自己使用过</li>
<li>提交PR时请注明推荐理由</li>
</ul>
<p>资源列表管理收到PR请求后，会定期（每周）在微博转发本周提交的PR列表，并在微博上面听取使用过这些资源的意见。确认通过后，会加入资源大全。</p>
<p>感谢您的贡献！</p>
<hr>
<h3 id="本项目的参与者"><a href="#本项目的参与者" class="headerlink" title="本项目的参与者"></a>本项目的参与者</h3><ul>
<li>维护者：<a class="link"   target="_blank" rel="noopener" href="https://github.com/tangyouhua" >tangyouhua<i class="fas fa-external-link-alt"></i></a></li>
<li>贡献者：iLeo、<a class="link"   target="_blank" rel="noopener" href="http://www.importnew.com/members/aoi/" >伯小乐<i class="fas fa-external-link-alt"></i></a>、<a class="link"   target="_blank" rel="noopener" href="http://www.importnew.com/members/tzstone/" >tzstone<i class="fas fa-external-link-alt"></i></a>、<a class="link"   target="_blank" rel="noopener" href="https://github.com/llhua2329" >llhua2329<i class="fas fa-external-link-alt"></i></a>、<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/author/yangxy81118/" >凝枫<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<p>注：名单不分排名，不定期补充更新</p>
<hr>
<p>sotayamashita 发起维护的 CSS 资源大全，包括：预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。</p>
<ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://pchaoo.gitee.io/blog/views/star/awesome-css.html#%E6%88%91%E4%BB%AC%E8%A6%81%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F" >我们要做什么？<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://pchaoo.gitee.io/blog/views/star/awesome-css.html#%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E6%9C%AC%E9%A1%B9%E7%9B%AE%EF%BC%9F" >如何参与本项目？<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://pchaoo.gitee.io/blog/views/star/awesome-css.html#%E5%A6%82%E4%BD%95%E4%B8%BA%E5%88%97%E8%A1%A8%E8%B4%A1%E7%8C%AE%E6%96%B0%E8%B5%84%E6%BA%90%EF%BC%9F" >如何为列表贡献新资源？<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://pchaoo.gitee.io/blog/views/star/awesome-css.html#%E6%9C%AC%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%8F%82%E4%B8%8E%E8%80%85" >本项目的参与者<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="预处理器"><a href="#预处理器" class="headerlink" title="预处理器"></a>预处理器</h2><p>更快地编译 CSS</p>
<ul>
<li>GCSS：一个用GO语言编写的CSS预处理器。<a class="link"   target="_blank" rel="noopener" href="https://github.com/yosssi/gcss" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>LESS：向下兼容CSS并为当前的CSS增加额外的功能。<a class="link"   target="_blank" rel="noopener" href="http://lesscss.org/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/myth/" >Myth<i class="fas fa-external-link-alt"></i></a>：只用写纯CSS而不用担心浏览器加载缓慢。<a class="link"   target="_blank" rel="noopener" href="https://github.com/segmentio/myth" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>PCSS：一个用Python语言编写的CSS预处理器。<a class="link"   target="_blank" rel="noopener" href="https://github.com/senko/pcss" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/postcss/" >PostCSS<i class="fas fa-external-link-alt"></i></a>：通过JS插件来转换CSS。<a class="link"   target="_blank" rel="noopener" href="https://github.com/postcss/postcss" >PostCSS<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/sass/" >Sass<i class="fas fa-external-link-alt"></i></a>：成熟、稳定且强力的专业CSS扩展语言。<a class="link"   target="_blank" rel="noopener" href="http://sass-lang.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/stylus/" >Stylus<i class="fas fa-external-link-alt"></i></a>：用于nodejs的直观、强健、极具特色的CSS语言。<a class="link"   target="_blank" rel="noopener" href="http://learnboost.github.io/stylus/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/yacp/" >YACP<i class="fas fa-external-link-alt"></i></a>：另一种CSS预处理器。<a class="link"   target="_blank" rel="noopener" href="https://github.com/morishitter/YACP" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<p>这里<a class="link"   target="_blank" rel="noopener" href="https://github.com/showcases/css-preprocessors" >有一个 CSS 预处理器汇总<i class="fas fa-external-link-alt"></i></a>。</p>
<h2 id="框架"><a href="#框架" class="headerlink" title="框架"></a>框架</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/960-grid-system/" >960 Grid System<i class="fas fa-external-link-alt"></i></a>：简化了web开发工作流程。<a class="link"   target="_blank" rel="noopener" href="http://960.gs/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/blueprintcss/" >Blueprint<i class="fas fa-external-link-alt"></i></a>：这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式 <a class="link"   target="_blank" rel="noopener" href="http://www.blueprintcss.org/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/bootstrap/" >Bootstrap<i class="fas fa-external-link-alt"></i></a>：最流行的HTML、CSS、JS框架 <a class="link"   target="_blank" rel="noopener" href="http://getbootstrap.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/inuit-css/" >inuit.css<i class="fas fa-external-link-alt"></i></a> ：强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架 <a class="link"   target="_blank" rel="noopener" href="http://inuitcss.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/foundation/" >Foundation<i class="fas fa-external-link-alt"></i></a>：一个高级响应式前端框架。<a class="link"   target="_blank" rel="noopener" href="http://foundation.zurb.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/material-design-lite/" >Material Design Lite<i class="fas fa-external-link-alt"></i></a>：很好的用于制作Material Design风格网站的框架。<a class="link"   target="_blank" rel="noopener" href="http://www.getmdl.io/started/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/materialize/" >Materialize<i class="fas fa-external-link-alt"></i></a>：基于Material Design的现代响应式前端框架。<a class="link"   target="_blank" rel="noopener" href="http://materializecss.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/pure-css/" >Pure.css<i class="fas fa-external-link-alt"></i></a>：一套可用于所有web项目的小型响应式CSS模块。<a class="link"   target="_blank" rel="noopener" href="http://purecss.io/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/semantic-ui/" >Semantic UI<i class="fas fa-external-link-alt"></i></a>：使用人性化html的强力框架。<a class="link"   target="_blank" rel="noopener" href="http://semantic-ui.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/skeleton/" >Skeleton<i class="fas fa-external-link-alt"></i></a>：一个超简单的响应式模板。<a class="link"   target="_blank" rel="noopener" href="http://getskeleton.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/uikit/" >UIkit<i class="fas fa-external-link-alt"></i></a>：适用于手机、平板以及电脑端的栅格系统。<a class="link"   target="_blank" rel="noopener" href="http://getuikit.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="工具集"><a href="#工具集" class="headerlink" title="工具集"></a>工具集</h2><ul>
<li>Basscss：一个基本元素样式与不可修改工具轻量级集合。<a class="link"   target="_blank" rel="noopener" href="http://www.basscss.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Bourbon：用于Sass的简单且轻量的混合库。<a class="link"   target="_blank" rel="noopener" href="http://bourbon.io/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Corpus：另一个CSS工具集。<a class="link"   target="_blank" rel="noopener" href="http://corpuscss.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Susy：用于Sass的响应式工具集。<a class="link"   target="_blank" rel="noopener" href="http://susy.oddbird.net/" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="CSS结构"><a href="#CSS结构" class="headerlink" title="CSS结构"></a>CSS结构</h2><ul>
<li>RSCSS：CSS样式结构的合理标准。<a class="link"   target="_blank" rel="noopener" href="https://github.com/rstacruz/rscss" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>ITCSS：用于大型UI项目的稳定、可扩展、可控制的CSS架构。<a class="link"   target="_blank" rel="noopener" href="https://twitter.com/itcss_io" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="CSS标准化"><a href="#CSS标准化" class="headerlink" title="CSS标准化"></a>CSS标准化</h2><ul>
<li>Normalize：一套提供较好的多浏览器默认样式一致性的CSS规范。<a class="link"   target="_blank" rel="noopener" href="https://github.com/necolas/normalize.css" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Normalize OpenType：为Normalize.css添加了OpenType特性，如连字、字间距等等。<a class="link"   target="_blank" rel="noopener" href="https://github.com/kennethormandy/normalize-opentype.css" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Reset：一套CSS标准，将全部的HTML元素调整到一致的基准线。<a class="link"   target="_blank" rel="noopener" href="http://meyerweb.com/eric/tools/css/reset/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>sanitize.css：一套可立即使用的，符合当今最优实践的CSS规范。<a class="link"   target="_blank" rel="noopener" href="https://10up.github.io/sanitize.css/" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="大型网站的CSS开发"><a href="#大型网站的CSS开发" class="headerlink" title="大型网站的CSS开发"></a>大型网站的CSS开发</h2><ul>
<li>[Github的CSS方案](<a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/htmlcss-code-guide-by-mark-otto/%EF%BC%89" >http://hao.importnew.com/htmlcss-code-guide-by-mark-otto/）<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/mdo" >Mark Otto<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://markdotto.com/2014/07/23/githubs-css/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>CodePen的CSS方案 by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/chriscoyier" >Chris Coyier<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://codepen.io/chriscoyier/blog/codepens-css" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>Lonely Planet的CSS方案 by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/ianfeather" >Ian Feather<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://ianfeather.co.uk/css-at-lonely-planet/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>Groupon的CSS方案 by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/peruvianidol" >Mike Aparicio<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://mikeaparicio.com/2014/08/10/css-at-groupon/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>Buffer的CSS方案 by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/brian_lovin" >Brian Lovin<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://blog.brianlovin.com/buffers-css/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>HOOTSUITE的CSS方案 by Steve Mynett，<a class="link"   target="_blank" rel="noopener" href="http://code.hootsuite.com/css-at-hootsuite/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/refining-the-way-we-structure-our-css-at-trello/" >如何精简TrelloCSS架构<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/bobbygrace" >Bobby Grace<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>Bugsnag的CSS架构 by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/maxluster" >Max Luster<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="https://bugsnag.com/blog/bugsnags-css-architecture" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li>Ghost的CSS方案 by Paul Davis，<a class="link"   target="_blank" rel="noopener" href="http://dev.ghost.org/css-at-ghost/" >英文<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/mediu-css/" >Medium的CSS方案<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/fat" >Jacob Thornton<i class="fas fa-external-link-alt"></i></a>，<a class="link"   target="_blank" rel="noopener" href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06" >英文<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="代码风格指导"><a href="#代码风格指导" class="headerlink" title="代码风格指导"></a>代码风格指导</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/necolas/idiomatic-css" >编写符合语言习惯的 CSS<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/necolas" >Nicolas Gallagher<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://cssguidelin.es/" >CSS 指南<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/csswizardry" >Harry Roberts<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://sass-guidelin.es/" >Sass 指南<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/HugoGiraudel" >Hugo Giraudel<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://codeguide.co/" >Mark Otto 编写的风格指南，受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://twitter.com/mdo" >Mark Otto<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS" >ThinkUp 的 CSS 风格指导<i class="fas fa-external-link-alt"></i></a>，作者ThinkUp</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" >Google 的 HTML&#x2F;CSS 风格指导<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/wordpress-css-coding-standards/" >WordPress的CSS代码标准<i class="fas fa-external-link-alt"></i></a>：<a class="link"   target="_blank" rel="noopener" href="https://make.wordpress.org/core/handbook/coding-standards/css/" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="风格指导"><a href="#风格指导" class="headerlink" title="风格指导"></a>风格指导</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://docs.atlassian.com/aui/latest/" >Atlassian 官方 UI 文档<i class="fas fa-external-link-alt"></i></a>；</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://rizzo.lonelyplanet.com/styleguide/design-elements/colours" >设计元素<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="http://www.lonelyplanet.com/" >lonely planet<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/styleguide/css" >GitHub 的 CSS 风格指导<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://ux.mailchimp.com/patterns" >Patterns<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="http://mailchimp.com/" >MailChimp 的风格指南<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.lightningdesignsystem.com/" >Lighting Design System<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="http://www.salesforce.com/" >Salesforce 的风格指南<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://sass-lang.com/styleguide" >SASS 风格指南<i class="fas fa-external-link-alt"></i></a> by Sass team.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://www.starbucks.com/static/reference/styleguide/" >星巴克的风格指南<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="http://www.starbucks.com/" >Starbucks<i class="fas fa-external-link-alt"></i></a>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://styleguides.io/examples.html" >关于网站风格指导的一些资源<i class="fas fa-external-link-alt"></i></a> by <a class="link"   target="_blank" rel="noopener" href="https://github.com/maban/styleguides/graphs/contributors" >Awesome people<i class="fas fa-external-link-alt"></i></a>.</li>
</ul>
<h1 id="命名习惯和方式"><a href="#命名习惯和方式" class="headerlink" title="命名习惯和方式"></a>命名习惯和方式</h1><ul>
<li>Atomic OOBEMITSCSS：<a class="link"   target="_blank" rel="noopener" href="http://www.sitepoint.com/atomic-oobemitscss/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://hao.importnew.com/css-naming-bem/" >BEM<i class="fas fa-external-link-alt"></i></a>：<a class="link"   target="_blank" rel="noopener" href="https://en.bem.info/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>SMACSS：<a class="link"   target="_blank" rel="noopener" href="https://smacss.com/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Point North：<a class="link"   target="_blank" rel="noopener" href="http://pointnorth.io/#base-browser-styling" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>ITCSS：<a class="link"   target="_blank" rel="noopener" href="http://itcss.io/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>OOCSS：<a class="link"   target="_blank" rel="noopener" href="http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Title CSS：<a class="link"   target="_blank" rel="noopener" href="http://www.sitepoint.com/title-css-simple-approach-css-class-naming/" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>idiomatic-css：<a class="link"   target="_blank" rel="noopener" href="https://github.com/necolas/idiomatic-css" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Atomic Design：<a class="link"   target="_blank" rel="noopener" href="http://patternlab.io/resources.html" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>SUIT CSS：<a class="link"   target="_blank" rel="noopener" href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname" >官网<i class="fas fa-external-link-alt"></i></a></li>
<li>Kickoff CSS：<a class="link"   target="_blank" rel="noopener" href="https://trykickoff.github.io/learn/css.html#namingscheme" >官网<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/davidtheclark/scalable-css-reading-list" >可扩展CSS阅读清单<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h1 id="其他资源"><a href="#其他资源" class="headerlink" title="其他资源"></a>其他资源</h1><h2 id="播客"><a href="#播客" class="headerlink" title="播客"></a>播客</h2><p>编程时可以听的一些内容。</p>
<ul>
<li><a class="link"   target="_blank" rel="noopener" href="http://shoptalkshow.com/" >Shop Talk Show<i class="fas fa-external-link-alt"></i></a>：Chris Coyier 和 Dave Rupert 的在线播客，涉及前端、UX的设计及开发。</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://styleguides.io/podcast/index.html" >Style Guide Podcast<i class="fas fa-external-link-alt"></i></a>：由 Anna Debenham 和 Brad Frost 主持的一些访谈。</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://5by5.tv/bigwebshow/" >The Big Web Show<i class="fas fa-external-link-alt"></i></a>：包含了几乎所有 Web 相关的话题，比如网络出版、艺术指导、内容策略、版面设计、Web技术等等。</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://5by5.tv/webahead/" >The Web Ahead<i class="fas fa-external-link-alt"></i></a>：与全世界的专家讨论 Web 技术的变化和发展。</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://goodstuff.fm/nbsp" >Non Breaking Space Show<i class="fas fa-external-link-alt"></i></a>：挖掘出那些在数字艺术、设计以及开发领域最好的、最知名的并且最聪明的创客们。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://changelog.com/" >The Changelog<i class="fas fa-external-link-alt"></i></a>：这个播客的口号是：“开源发展很快，快跟上”，致力于让你跟上最新的开源技术。</li>
</ul>
<h2 id="Twitter"><a href="#Twitter" class="headerlink" title="Twitter"></a>Twitter</h2><p>值得关注的活跃用户</p>
<ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/cssanimation" >CSS Animation<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/andreysitnik" >Andrey Sitnik<i class="fas fa-external-link-alt"></i></a>：@Autoprefixer, <a class="link"   target="_blank" rel="noopener" href="http://easings.net/" >http://easings.net<i class="fas fa-external-link-alt"></i></a> 和 @PostCSS 的作者</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/evaferreira92" >Evangelina Ferreira<i class="fas fa-external-link-alt"></i></a>：web设计师，@multimedial_utn 的教授，HTML5 &amp; CSS狂热爱好者，业余翻译者。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/SaraSoueidan" >Sara Soueidan<i class="fas fa-external-link-alt"></i></a>：@Codrops CSS Reference的作者，Smashing Book #5的合著者。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/HugoGiraudel" >Hugo Giraudel<i class="fas fa-external-link-alt"></i></a>：@edenspiekermann 的 CSS 怪才以及 Sass 黑客</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/guyroutledge" >Guy Routledge<i class="fas fa-external-link-alt"></i></a>：前端开发者、@GA_London 的教师，<a class="link"   target="_blank" rel="noopener" href="http://www.atozcss.com/" >http://www.atozcss.com<i class="fas fa-external-link-alt"></i></a> 的视频作者，宅男，吃货。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/heydonworks" >Heydon Pickering<i class="fas fa-external-link-alt"></i></a>：爱吃大米，同时也是一个UX设计师，作者，@smashingmag 编辑以及程序员。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/mrmrs_" >Adam Morse<i class="fas fa-external-link-alt"></i></a>：开源的粉丝和支持者</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/donovanh" >Donovan Hutchinson<i class="fas fa-external-link-alt"></i></a>：设计师、开发者、作家。偶尔在<a class="link"   target="_blank" rel="noopener" href="http://Hop.ie%E4%B8%8A%E5%86%99%E5%8D%9A%E5%AE%A2%EF%BC%8C%E7%9B%AE%E5%89%8D%E5%9C%A8%E5%BB%BA%E8%AE%BE@cssanimation/" >http://Hop.ie上写博客，目前在建设@cssanimation<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/CSScommits" >CSS Commits<i class="fas fa-external-link-alt"></i></a>：最近忙于 CSSWG 的公共 Mercurial 库</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/scottjehl" >Scott Jehl<i class="fas fa-external-link-alt"></i></a>：responsiblerwd 的作者，现在 abookapart上 面在打折</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/dudleystorey" >Dudley Storey<i class="fas fa-external-link-alt"></i></a>：Web开发者、作者、老师以及演说者。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/zomigi" >Zoe M. Gillenwater<i class="fas fa-external-link-alt"></i></a>：Web设计师、开发者，专注于CSS、RWD、UX以及无障碍开发。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/ben_eb" >Ben Briggs<i class="fas fa-external-link-alt"></i></a>：主要研究node.js、javascript、开源模块、客户端优化、web性能相关。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/aerotwist" >Paul Lewis<i class="fas fa-external-link-alt"></i></a>：将代码与设计联系起来的谷歌员工。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/thierrykoblentz" >Thierry Koblentz<i class="fas fa-external-link-alt"></i></a>：Yahoo 的 CSS 开发者</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/necolas" >Nicolas Gallagher<i class="fas fa-external-link-alt"></i></a>：Twitter的软件工程师</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/csswizardry" >Harry Roberts<i class="fas fa-external-link-alt"></i></a>- @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/philwalton" >Phil Walton<i class="fas fa-external-link-alt"></i></a> -谷歌工程师、开源拥护者、开发者、设计师、写手。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/LeaVerou" >Lea Verou<i class="fas fa-external-link-alt"></i></a>：MIT_CSAIL, @CSSWG IE, @OReillyMedia作者的研究助理，前W3C员工</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/crnacura" >Manoela Ilic<i class="fas fa-external-link-alt"></i></a>：CSS和HTML是我的画笔，我对认知科学、AI、HCI、UI设计以及天体物理学很感兴趣，数码控。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/Una" >Una Kravets<i class="fas fa-external-link-alt"></i></a>：BMDesign以及Sassvocate的前端工程师，团队建设者以及手工艺者。座右铭：所有东西都应该开源！</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/chriscoyier" >Chris Coyier<i class="fas fa-external-link-alt"></i></a>：CodePen的设计师，Real_CSS_Tricks作者</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/stubbornella" >Nicole Sullivan<i class="fas fa-external-link-alt"></i></a>：极客！</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/ebidel" >Eric Bidelman<i class="fas fa-external-link-alt"></i></a>：谷歌的工程师，参与项目有Chrome、web组件、Polymer</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/patrickhamann" >Patrick Hamann<i class="fas fa-external-link-alt"></i></a>：热爱爬山、啤酒以及美食。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/davemcfarland" >Dave McFarland<i class="fas fa-external-link-alt"></i></a>：Web开发者，《CSS: The Missing Manual》和《JavaScript &amp; jQuery: The Missing Manual》的作者，</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/davidbaron" >L. David Baron<i class="fas fa-external-link-alt"></i></a>：Mozilla开发者，CSS以及W3C标准的「外交官」。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/glazou" >Daniel Glazman<i class="fas fa-external-link-alt"></i></a>：W3C的CSS工作团队联合主席，企业家，软件工程师，极客，两个孩子的爸爸，通晓多国语言，喜欢鸭子。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/chriseppstein" >The Chris Eppstein<i class="fas fa-external-link-alt"></i></a>：爱恨分明，家庭美满，写代码，主导 LinkedIn 的样式。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/nex3" >Natalie Weizenbaum<i class="fas fa-external-link-alt"></i></a>：女程序员，SassCSS 的主设计师和开发者，在谷歌做 Dart 语言相关工作。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/brad_frost" >Brad Frost<i class="fas fa-external-link-alt"></i></a>：Web设计师、演讲者、写手、顾问、音乐家。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/MoOx" >Maxime Thirouin<i class="fas fa-external-link-alt"></i></a>：前端工程师，自由职业者，UI&#x2F;UX开发者。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/mdo" >Mark Otto<i class="fas fa-external-link-alt"></i></a>：在GitHub和Bootstrap工作，曾就职于Twitter，超级书呆子。</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/simurai" >Simon<i class="fas fa-external-link-alt"></i></a>：UI设计师，CSS开发者</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/connors" >Connor Sears<i class="fas fa-external-link-alt"></i></a>：GitHub设计师</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/rem" >Remy Sharp<i class="fas fa-external-link-alt"></i></a>：他的推都是关于CSS尺寸单元的</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://twitter.com/snookca" >Jonathan Snook<i class="fas fa-external-link-alt"></i></a>：设计师、开发者、写手、演讲者。我在网上做些东西，我写的SMACSS。</li>
</ul>
<h2 id="视频"><a href="#视频" class="headerlink" title="视频"></a>视频</h2><p>一个很有用的必看视频清单，这个清单是从 <a class="link"   target="_blank" rel="noopener" href="https://github.com/AllThingsSmitty/must-watch-css/commit/908a28bf36517a5bac9a34e3174885ea57a62017" >908a28<i class="fas fa-external-link-alt"></i></a> 的 <a class="link"   target="_blank" rel="noopener" href="https://github.com/AllThingsSmitty/must-watch-css" >AllThingsSmitty&#x2F;must-watch-css<i class="fas fa-external-link-alt"></i></a> 复制过来的，我已经在Twitter上跟他说了，非常感谢！</p>
<h3 id="2015"><a href="#2015" class="headerlink" title="2015"></a>2015</h3><ol>
<li><a class="link"   target="_blank" rel="noopener" href="http://jqueryuk.com/2015/videos.php?s=mdo-ular-css" >mdo-ular CSS<i class="fas fa-external-link-alt"></i></a>: Mark Otto, jQuery UK <code>30:06</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://jqueryuk.com/2015/videos.php?s=mdo-ular-css" >CSS Architecture with SMACSS<i class="fas fa-external-link-alt"></i></a>: Caleb Meredith, DevTips channel <code>30:15</code>. 用SMACSS搭建CSS结构</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ZVk3GQHfkbU" >CSS Workflow from the Ground Up<i class="fas fa-external-link-alt"></i></a>: Jonathan Snook, Generate conf 2015 <code>46:06</code>. 从头开始学习CSS工作流</li>
</ol>
<h3 id="2014"><a href="#2014" class="headerlink" title="2014"></a>2014</h3><ol>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/95734680" >What Is a CSS Framework Anyway? | 究竟什么是CSS框架？<i class="fas fa-external-link-alt"></i></a>: Harry Roberts, Industry Conf <code>48:48</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/99877232" >CSS Is a Mess | 乱七八糟的CSS<i class="fas fa-external-link-alt"></i></a>: Jonathan Snook, Beyond Tellerand <code>53:49</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=FYcu-wWrNqo&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >10 Commandments for Efficient CSS Architecture | 高效CSS结构十诫<i class="fas fa-external-link-alt"></i></a>: Kushagra Gour, CSSConf.Asia <code>35:55</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/100501790" >Slaying the Dragon: How to Refactor CSS for Maintainability | 杀掉巨龙：从可维护性方面考虑如何重构CSS<i class="fas fa-external-link-alt"></i></a>: Alicia Liu, Front-Trends <code>33:21</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=vBHt61yDO9U&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSS in Your Pocket：Mobile CSS Tips from the Trenches | 口袋中的CSS-移动端CSS开发要点<i class="fas fa-external-link-alt"></i></a>: Angelina Fabbro, CSSConf.US <code>34:19</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=lf7L8X6ZBu8&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Styling and Animating Scalable Vector Graphics with CSS | 用CSS制作可扩展的矢量图动画<i class="fas fa-external-link-alt"></i></a>: Sara Soueidan, CSSConf.EU <code>29:16</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=-bZSTMLqf8Q&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Play Nice With CSS Tools and Methodologies | 学会使用CSS工具和方法<i class="fas fa-external-link-alt"></i></a>: Brad Westfall, HTML5DevConf <code>42:47</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=_0Fk85to6hA&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSS and the Critical Path | CSS以及关键路径<i class="fas fa-external-link-alt"></i></a>: Patrick Hamann, CSSConf.EU <code>33:42</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://new.livestream.com/accounts/6779986/events/2928486/videos/51426837" >All the Right Moves: How to Put Your UI in Motion | 走好每一步：如何让你的UI动起来<i class="fas fa-external-link-alt"></i></a>: Val Head, Multi-Mania <code>45:49</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/98746172" >Present and Future of CSS Layout | CSS布局的发展<i class="fas fa-external-link-alt"></i></a>: Tab Atkins, CSS Day <code>49:31</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=L8w3v9m6G04&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Thinking Beyond “Scalable CSS” | 关于可扩展CSS的思考<i class="fas fa-external-link-alt"></i></a>: Nicolas Gallagher, dotCSS <code>28:46</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=QHxrr6Q82yI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Web Components &amp; the Future of CSS | WEB组件以及CSS的将来<i class="fas fa-external-link-alt"></i></a>: Philip Walton, SFHTML5 <code>40:02</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=FEs2jgZBaQA&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSS Performance Tooling | CSS性能工具<i class="fas fa-external-link-alt"></i></a>: Addy Osmani, CSSConf.EU <code>46:27</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/100264064" >3.14 Things I Didn’t Know About CSS3 | 关于CSS，我所不知道的14件事<i class="fas fa-external-link-alt"></i></a>: Mathias Bynens, CSS Day <code>45:35</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="http://vimeo.com/101718785" >Effortless Style | 轻松的样式<i class="fas fa-external-link-alt"></i></a>: Heydon Pickering, CSS Day <code>49:51</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/99916682" >CSS: Yawn to Yay! | CSS：从无聊到精彩<i class="fas fa-external-link-alt"></i></a> Kyle Simpson, Front-Trends <code>39:04</code>.</li>
</ol>
<h3 id="2013"><a href="#2013" class="headerlink" title="2013"></a>2013</h3><ol>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=xbpnqbM6cRk&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >When Bootstrap Attacks | 当Bootstrap开始发力<i class="fas fa-external-link-alt"></i></a>: Pamela Fox, CSSConf.US <code>28:48</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=NTJUFQmHbvc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSS in the 4th Dimension | CSS是第四维<i class="fas fa-external-link-alt"></i></a>: Lea Verou, JSConf.Asia <code>44:49</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=2PU6JX4S7zI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Automated CSS Testing | 自动化CSS测试<i class="fas fa-external-link-alt"></i></a>: Jakob Mattsson, JSConf.Asia <code>42:07</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ue-Z_HxS3cc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSSConf.EU Keynote | CSSConf.EU的基调<i class="fas fa-external-link-alt"></i></a>: Nicole Sullivan, CSSConf.EU <code>20:57</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/74359951" >CSS Application Architecture | CSS的应用架构<i class="fas fa-external-link-alt"></i></a>: Nicolas Gallagher, SmashingConf <code>38:36</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=I82ytAWxzrI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Realigning &amp; Refactoring UI | UI的调整和重构<i class="fas fa-external-link-alt"></i></a>: Jina Bolton, SassConf <code>48:08</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ldx4ZFxMEeo&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Normalizing Designs for Better Quality CSS | 提高CSS质量的规范化设计<i class="fas fa-external-link-alt"></i></a>: Harry Roberts, CSSConf.EU <code>43:40</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=833xr1MyE30&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Automating the Removal of Unused CSS | 自动清除无用的CSS<i class="fas fa-external-link-alt"></i></a>: Addy Osmani, Velocity Europe Conference <code>5:57</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=2iFw2GCOPj0&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >The Humble Border-Radius | 低调的Border-Radius<i class="fas fa-external-link-alt"></i></a>: Lea Verou, Future of Web Design <code>37:07</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=-ZJeOJGazgE&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >The Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量<i class="fas fa-external-link-alt"></i></a>: Chris Eppstein, CSSConf.EU <code>38:54</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=5_nt5qV15po&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Front-End Tools for the Young Developer | 年轻开发者的前端工具<i class="fas fa-external-link-alt"></i></a>: Christian Vuerings, SF HTML5 User Group <code>14:16</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=w9HeWBH_kvg&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Maths-Powered Transforms for Creating 3D Shapes | Maths-创建3D图形的强力转换器<i class="fas fa-external-link-alt"></i></a>: Ana-Maria Tudor, CSSConf.EU <code>30:27</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/66039168" >Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G | Sass和面向对象CSS完美搭配<i class="fas fa-external-link-alt"></i></a>: Nicole Sullivan, TXJS <code>27:50</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=UpVj5azI-iI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >CSS Levels Up | 提升CSS等级<i class="fas fa-external-link-alt"></i></a>: Angelina Fabbro, CSSConf.EU <code>31:38</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/70041549" >Architecting Scalable CSS | 搭建可扩展的CSS<i class="fas fa-external-link-alt"></i></a>: Harry Roberts, Beyond Tellerand <code>41:57</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=3ikye7Qc7Ak&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >More CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密：CSS不为人知的另外10件事<i class="fas fa-external-link-alt"></i></a>: Lea Verou, W3Conf <code>60:39</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=ojj_-6Xiud4" >Atomic Cascading Style Sheets<i class="fas fa-external-link-alt"></i></a>: Renato Iwashima, HTML5DevConf <code>52:33</code>.</li>
</ol>
<h3 id="2012"><a href="#2012" class="headerlink" title="#2012"></a><a class="link"   target="_blank" rel="noopener" href="https://pchaoo.gitee.io/blog/views/star/awesome-css.html#_2012" >#<i class="fas fa-external-link-alt"></i></a>2012</h3><ol>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=hFdbE6T9QGc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA" >Open Source Tools and Libraries for Designers | 设计师的开源工具以及资源库<i class="fas fa-external-link-alt"></i></a>: Julie Ann Horvath, HTML5DevConf <code>29:39</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/54990931" >GitHub’s CSS Performance | GitHub的CSS表现<i class="fas fa-external-link-alt"></i></a>: Jon Rohan, CSS Dev Conf <code>40:50</code>.</li>
</ol>
<h3 id="2010"><a href="#2010" class="headerlink" title="2010"></a>2010</h3><ol>
<li><a class="link"   target="_blank" rel="noopener" href="https://vimeo.com/17091905" >Handcrafted CSS | 手写CSS<i class="fas fa-external-link-alt"></i></a>: Dan Cederholm, Build Conference <code>44:29</code>.</li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=j6sAm7CLoCQ" >The Top 5 Mistakes of Massive CSS | 大规模CSS中最容易出现的5个错误<i class="fas fa-external-link-alt"></i></a>: Nicole Sullivan, Build Conference <code>37:53</code>.</li>
</ol>
<h3 id="有影响力的书"><a href="#有影响力的书" class="headerlink" title="有影响力的书"></a>有影响力的书</h3><p><em>具有广泛影响且值得阅读的前端经典书籍。</em></p>
<ul>
<li>待补充</li>
</ul>
<h3 id="知名网站"><a href="#知名网站" class="headerlink" title="知名网站"></a>知名网站</h3><p><em>值得关注的前端技术站点。</em></p>
<h4 id="中文站点"><a href="#中文站点" class="headerlink" title="中文站点"></a>中文站点</h4><ul>
<li><a class="link"   target="_blank" rel="noopener" href="http://web.importnew.com/" >伯乐在线前端频道<i class="fas fa-external-link-alt"></i></a>：伯乐前端分享 Web 前端开发，包括 JavaScript、CSS 和 HTML5 开发技术，前端相关的行业动态。</li>
</ul>
<h4 id="英文站点"><a href="#英文站点" class="headerlink" title="英文站点"></a>英文站点</h4><ul>
<li>待补充</li>
</ul>
<h3 id="微博、微信公众号"><a href="#微博、微信公众号" class="headerlink" title="微博、微信公众号"></a>微博、微信公众号</h3><p>* 前端大全 微博：<a class="link"   target="_blank" rel="noopener" href="http://weibo.com/u/5261893910" >@前端大全<i class="fas fa-external-link-alt"></i></a> * 前端大全：专注分享Web前端相关的内容，包括 JavaScript、CSS 和 HTML5 技术文章、工具资源、精选课程和Web技术领域热点资讯。<br><img  
                     lazyload
                     alt="image"
                     data-src="http://ww4.sinaimg.cn/small/63918611gw1epb2c688tqj2046046mx8.jpg"
                      alt="img"
                > * UI设计达人：分享 UI 设计精选文章、案例、行业趋势、课程和书籍。<br><img  
                     lazyload
                     alt="image"
                     data-src="http://ww4.sinaimg.cn/mw690/bfdcef89gw1evuvyehtx4j2076076q3e.jpg"
                      alt="img"
                > * 网页设计精选：分享网页设计精选文章、案例、行业趋势、课程和书籍。<br><img  
                     lazyload
                     alt="image"
                     data-src="http://ww2.sinaimg.cn/mw690/bfdcef89gw1evuvyhsikmj2076076dgb.jpg"
                      alt="img"
                ></p>
<h3 id="博客"><a href="#博客" class="headerlink" title="博客"></a>博客</h3><h4 id="中文博客"><a href="#中文博客" class="headerlink" title="中文博客"></a>中文博客</h4><ul>
<li>待补充</li>
</ul>
<h4 id="英文博客"><a href="#英文博客" class="headerlink" title="英文博客"></a>英文博客</h4><ul>
<li>待补充</li>
</ul>

            </div>

            
                <div class="post-copyright-info">
                    
<div class="article-copyright-info-container">
    <ul class="copyright-info-content">
        <li class="post-title">
            <span class="type">本文标题</span>：<span class="content">CSS资源大全中文版</span>
        </li>
        <li class="post-author">
            <span class="type">本文作者</span>：<span class="content">Blank</span>
        </li>
        <li class="post-time">
            <span class="type">创建时间</span>：<span class="content">2023-02-21 00:51:18</span>
        </li>
        <li class="post-link">
            <span class="type">本文链接</span>：<span class="content">2023/02/21/CSS 资源大全中文版/</span>
        </li>
        <li class="post-license">
            <span class="type">版权声明</span>：<span class="content">本博客所有文章除特别声明外，均采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a> 许可协议。转载请注明出处！</span>
        </li>
    </ul>
    <div class="copy-copyright-info flex-center tooltip" data-content="复制版权信息" data-offset-y="-2px">
        <i class="fa-solid fa-copy"></i>
    </div>
</div>

                </div>
            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/CSS/">#CSS</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/02/21/Docker/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Docker</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/02/21/Collection%20%E7%B1%BB%E5%85%B3%E7%B3%BB%E5%9B%BE/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Collection 类关系图</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
            <div class="toc-content-container">
                <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-%E8%B5%84%E6%BA%90%E5%A4%A7%E5%85%A8%E4%B8%AD%E6%96%87%E7%89%88"><span class="nav-number">1.</span> <span class="nav-text">CSS 资源大全中文版</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%88%91%E4%BB%AC%E8%A6%81%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">1.0.1.</span> <span class="nav-text">我们要做什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E6%9C%AC%E9%A1%B9%E7%9B%AE%EF%BC%9F"><span class="nav-number">1.0.2.</span> <span class="nav-text">如何参与本项目？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E4%B8%BA%E5%88%97%E8%A1%A8%E8%B4%A1%E7%8C%AE%E6%96%B0%E8%B5%84%E6%BA%90%EF%BC%9F"><span class="nav-number">1.0.3.</span> <span class="nav-text">如何为列表贡献新资源？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%AC%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%8F%82%E4%B8%8E%E8%80%85"><span class="nav-number">1.0.4.</span> <span class="nav-text">本项目的参与者</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8"><span class="nav-number">1.1.</span> <span class="nav-text">预处理器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A1%86%E6%9E%B6"><span class="nav-number">1.2.</span> <span class="nav-text">框架</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B7%A5%E5%85%B7%E9%9B%86"><span class="nav-number">1.3.</span> <span class="nav-text">工具集</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS%E7%BB%93%E6%9E%84"><span class="nav-number">1.4.</span> <span class="nav-text">CSS结构</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS%E6%A0%87%E5%87%86%E5%8C%96"><span class="nav-number">1.5.</span> <span class="nav-text">CSS标准化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%A7%E5%9E%8B%E7%BD%91%E7%AB%99%E7%9A%84CSS%E5%BC%80%E5%8F%91"><span class="nav-number">1.6.</span> <span class="nav-text">大型网站的CSS开发</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC%E6%8C%87%E5%AF%BC"><span class="nav-number">1.7.</span> <span class="nav-text">代码风格指导</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A3%8E%E6%A0%BC%E6%8C%87%E5%AF%BC"><span class="nav-number">1.8.</span> <span class="nav-text">风格指导</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E4%B9%A0%E6%83%AF%E5%92%8C%E6%96%B9%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">命名习惯和方式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">3.</span> <span class="nav-text">参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E8%B5%84%E6%BA%90"><span class="nav-number">4.</span> <span class="nav-text">其他资源</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%92%AD%E5%AE%A2"><span class="nav-number">4.1.</span> <span class="nav-text">播客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Twitter"><span class="nav-number">4.2.</span> <span class="nav-text">Twitter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%86%E9%A2%91"><span class="nav-number">4.3.</span> <span class="nav-text">视频</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2015"><span class="nav-number">4.3.1.</span> <span class="nav-text">2015</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2014"><span class="nav-number">4.3.2.</span> <span class="nav-text">2014</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2013"><span class="nav-number">4.3.3.</span> <span class="nav-text">2013</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2012"><span class="nav-number">4.3.4.</span> <span class="nav-text">2012</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2010"><span class="nav-number">4.3.5.</span> <span class="nav-text">2010</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%89%E5%BD%B1%E5%93%8D%E5%8A%9B%E7%9A%84%E4%B9%A6"><span class="nav-number">4.3.6.</span> <span class="nav-text">有影响力的书</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9F%A5%E5%90%8D%E7%BD%91%E7%AB%99"><span class="nav-number">4.3.7.</span> <span class="nav-text">知名网站</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%AD%E6%96%87%E7%AB%99%E7%82%B9"><span class="nav-number">4.3.7.1.</span> <span class="nav-text">中文站点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%8B%B1%E6%96%87%E7%AB%99%E7%82%B9"><span class="nav-number">4.3.7.2.</span> <span class="nav-text">英文站点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BE%AE%E5%8D%9A%E3%80%81%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7"><span class="nav-number">4.3.8.</span> <span class="nav-text">微博、微信公众号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.3.9.</span> <span class="nav-text">博客</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%AD%E6%96%87%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.3.9.1.</span> <span class="nav-text">中文博客</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%8B%B1%E6%96%87%E5%8D%9A%E5%AE%A2"><span class="nav-number">4.3.9.2.</span> <span class="nav-text">英文博客</span></a></li></ol></li></ol></li></ol></li></ol>
    </div>
</div>

            </div>
        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">Blank</a>
            
        </div>
        
            <script async data-pjax
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                
            </div>
        
        <div class="theme-info info-item">
            由 <a target="_blank" href="https://hexo.io">Hexo</a> 驱动&nbsp;|&nbsp;主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
            <div class="deploy-info info-item">
                
                    <a target="_blank" rel="nofollow" href="https://gitee.com/lucky0915">
                
                    本站由 <span class="tooltip" data-content="Gitee Pages"><img src="/images/deploy-provider/gitee.png"></span> 提供部署服务
                
                    </a>
                
            </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item flex-center toggle-show-toc">
                <i class="fas fa-list"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="close-popup-btn">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/local-search.js"></script>



    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/code-block.js"></script>



    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/lazyload.js"></script>


<div class="post-scripts pjax">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/post-helper.js"></script>
        
            <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/libs/anime.min.js"></script>
        
        
            <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/toc.js"></script>
        
    
</div>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.6.1/source/js/libs/pjax.min.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.pjax = new Pjax({
            selectors: [
                'head title',
                '.page-container',
                '.pjax'
            ],
            history: true,
            debug: false,
            cacheBust: false,
            timeout: 0,
            analytics: false,
            currentUrlFullReload: false,
            scrollRestoration: false,
            // scrollTo: true,
        });

        document.addEventListener('pjax:send', () => {
            KEEP.utils.pjaxProgressBarStart();
        });

        document.addEventListener('pjax:complete', () => {
            KEEP.utils.pjaxProgressBarEnd();
            window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
            KEEP.refresh();
        });
    });
</script>



</body>
</html>
